<!DOCTYPE html>
<html>
<head>
	<title>首页配置</title>
    <include file='public/head'>
        <style>
			.layui-legend-size{font-size:14px !important;}
			.layui-nopadding{padding:0 !important;}
			.layui-overflow{overflow:auto;}
			.layui-nomargin{margin: 0 !important;}
			.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
			.layui-input{height:30px !important; }
			.layui-form-search-item .layui-inline{margin-bottom: 5px;} 
			.layui-form-search-item label{margin-left: 15px;}
			.layui-table-page {padding: 7px 0px 0px;}
			.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
			.layui-table-cell{
			    height: 65px;
			    line-height: 65px;
			}
        </style>
</head>
<body>
	<!-- layui-tab开始 -->
	<div class="layui-tab" lay-filter="demo-tab" >
		<!-- 顶部导航菜单开始 -->
		<div class="layui-tab-nav">
			<ul class="layui-tab-title">
                {:getNav('site_config','home_page_config/index')};
			</ul>
		</div>	
		<!-- 顶部导航菜单结束 -->
		
		<!--二级导航开始-->
		<div style="margin-top:10px;">
            <div class="layui-btn-group">
                <a href="{:cmf_plugin_url('SiteConfig://home_page_config/index')}?type=0"><button type="button" class="layui-btn <?php if( $search['type']!=0) echo 'layui-btn-primary'; ?>" >轮播图配置</button></a>
                <a href="{:cmf_plugin_url('SiteConfig://home_page_config/index')}?type=1"><button type="button" class="layui-btn <?php if( $search['type']!=1) echo 'layui-btn-primary'; ?>" >栏目配置</button></a>
                <a href="{:cmf_plugin_url('SiteConfig://home_page_config/index')}?type=2"><button type="button" class="layui-btn <?php if( $search['type']!=2) echo 'layui-btn-primary'; ?>" >瓷片区配置</button></a>
                <a href="{:cmf_plugin_url('SiteConfig://home_page_config/index')}?type=3"><button type="button" class="layui-btn <?php if( $search['type']!=3) echo 'layui-btn-primary'; ?>" >启动页配置</button></a>
            </div>
		</div>
		<!--二级导航结束-->
		
        <!-- 内容开始-->
		 <!-- 搜索栏开始 -->
		<fieldset class="layui-elem-field layui-field-title layui-field-padding">
			<legend class="layui-legend-size">搜索</legend>
			<form class="layui-form table-bar" action="{:cmf_plugin_url('SiteConfig://home_page_config/index')}" lay-filter="form-bar">

				<div class="layui-form-search-item">
					<div class="layui-inline">
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" name="keywords" autocomplete="off" value="{$search['keywords']|default=''}" placeholder="请输入关键字..." class="layui-input">
						</div>
					</div>
					
                        <input type="hidden" name="type" value="{$search['type']|default='0'}">
					<div class="layui-inline">
						<button type="submit" class="layui-btn layui-btn-sm layui-btn-primary " style="font-weight:800;" lay-submit="" lay-filter="demo2"><i class="layui-icon ">&#xe615;</i>搜索</button>
					</div>
				</div>
			</form>
		</fieldset>
		<!-- 搜索栏结束 -->

		<!-- 内容开始 -->
		<form  class="layui-form" action="">

			<!-- 数据表格开始 -->
			<table class="layui-hide" id="article_tab" lay-filter="article_tab"></table>
			<!-- 数据表格结束 -->

			<!-- 表头部工具开始 -->
			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
					<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="batch_delete">批量删除</button>
					<button type="button" class="layui-btn layui-btn-xs layui-btn-warm" lay-event="batch_order">确认排序</button>
					<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="batch_add_mb">模板管理</button>
					<?php $strs = ["轮播图",'栏目','瓷片区','启动页'];?>
					<button type="button" class="layui-btn layui-btn-xs" lay-event="batch_add">添加{$strs[ $search ['type'] ]}</button>
					
				</div>
			</script>
			<!-- 表头部工具结束 -->

			<!--这个是选择框tpl-->
			<script type="text/html" id="show_list_order">
                    <input type="number" data-tag="{{d.id}}" name="list_order" style="width:50px; height:30px;" value="{{d.list_order}}" />
			</script>
			<script type="text/html" id="show_image">
			    {{# if(d.image != '' ) { }}
			        <img  src="{{d.image}}" style="width:64px;height:64px; border:1px solid #ccc;" >
			    {{# }else{  }}
			    -
			    {{# } }}
			    
			</script>
			<script type="text/html" id="show_addr_input">
			    <div style="width:200px">
                <input  name="" readonly style="width:220px;height:30px;" value="{{d.addr}}" autocomplete="off"  />
                <button type="button" style="width:50px;height:25px;color:white;background-color:#18BC9C;border:none;z-index:990;" id="s{{d.id}}" onclick="fuzhi( this , '{{d.addr}}');">复制</button>
                </div>
			</script>
			
			<script type="text/html" id="show_addr">
                  {{#  if( d.addr_type == 0 ){ }}
                   超链接
                  {{#  } else{ }}
                  路由地址
                  {{#  } }} 
			</script>
			
			<script type="text/html" id="show_tpl">
				 {{# if( d.status == 1 ){ }}
                  显示
                 {{# }else{ }}
                  隐藏
                 {{# } }} 
			</script>

			<!-- toolbar - 工具条模板开始 -->
			<script type="text/html" id="action_bar">
				<div class="layui-btn-group">
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs " lay-event="update">
						<i class="layui-icon">&#xe642;</i>
					</button>
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs "  lay-event="delete">
						<i class="layui-icon">&#xe640;</i>
					</button>
				</div>
			</script>
			<!-- toolbar - 工具条模板结束 -->
		</form>
		<!-- 内容结束 -->
		<!-- 内容结束-->
	</div>
	<!-- layui-tab结束-->

	<include file='public/scripts'>
	   <!-- var clipboard = new ClipboardJS('.font-primary');-->
	

	<!-- script开始-->	
	<script>
	;!function(){
		var form = layui.form
			,layer = layui.layer    //弹出层必需
			,layedit = layui.layedit  //富文本必需
			,laydate = layui.laydate  //日期选择必需
			,table = layui.table  //表格必需
			,element = layui.element;  //选项卡	


		table = layui.table;
	
        //渲染表格
        table.render({
                defaultToolbar:false
                ,elem: '#article_tab'
                ,cellMinWidth: 40 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,limit:20
                ,url:"{:cmf_plugin_url('SiteConfig://home_page_config/getlist')}?type={$search['type']}&keywords={$search['keywords']|default=''}"//数据接口
				,toolbar: '#toolbarDemo' //开启表格头部工具栏区域
				,cols: [[
					{type:'checkbox'}
                    ,{field:'list_order',title:'排序', width:80, templet:'#show_list_order'}
					,{field:'relevance_id',  title: '关联id' , width:80 }
					,{field:'image',title:'图片' , width:100, templet:'#show_image'}
					,{field:'title', title: '标题'}
					,{field:'introductory', title:'简介'}
					,{field:"addr" , title:"地址" , width:300 , templet:'#show_addr_input' , unresize: false}
					,{field:"addr_type" , title:"超链接|路由地址" ,width:150, templet:'#show_addr'}
					,{field:"status" , title:"状态",templet: '#show_tpl', unresize: true }
					,{field:"delay" , title:"时间(s)" }
					,{field:'cate_url', title:'操作', width: 80,toolbar:'#action_bar'}
                ]]//设置表头
                ,page:true//开启分页
                ,response: {
                  statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
				,parseData: function(res){ //res 即为原始返回的数据

					return {
    					"code": res.code, //解析接口状态
    					"msg": res.message, //解析提示文本
    					"count": res.data.total, //解析数据长度
    					"data": res.data.data //解析数据列表
					};
				}
         
 
            });

	//头工具栏
		table.on('toolbar(article_tab)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
			switch(obj.event){
				case 'batch_add':
					var txt = $(this).text();
					layer.open({
    					type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    					,title: txt//层的标题
    					,shadeClose: false
    					,shade: 0.8//遮罩
    					,area: ['95%', '95%']//宽高
    					,btn:['保存','关闭']//弹框按钮
    					,fixed:false//固定
    					,content: "{:cmf_plugin_url('SiteConfig://home_page_config/addConfig')}?type={$search['type']}" //iframe的url
    					,yes:function(index, layero){
    						//调用子页面方法
    						parentInfo = window["layui-layer-iframe" + index].callbackdata(index);
    					}
    					,btn2:function(index, layero){
    					}
					});
				break;
				case 'batch_add_mb':
					var txt = $(this).text();
					layer.open({
    					type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    					,title: txt//层的标题
    					,shadeClose: false
    					,shade: 0.8//遮罩
    					,area: ['95%', '95%']//宽高
    					,fixed:false//固定
    					,content:"{:cmf_plugin_url('SiteConfig://home_page_config/mblist')}?type={$search['type']}" //iframe的url
    					,yes:function(index, layero){
    						//调用子页面方法
    						parentInfo = window["layui-layer-iframe" + index].callbackdata(index);
    					}
    					,btn2:function(index, layero){
    					}
					});
				break;
				case 'batch_delete':

					var data = checkStatus.data;
					var ids = data.map( ( v,i) => {
					    return v.id;
					});
					
					//询问框
					layer.confirm('确定要删除选中项吗？', {icon: 3, title:'提示',btn:['删除','取消']}
					, function(index,layero){
						$.ajax({
							url:"{:cmf_plugin_url('SiteConfig://home_page_config/delconfig')}",
							type:'post',
							data:{id:ids},
							success:function(data){
								let icon = ( data.code == 200 )  ? 1 : 5 ; 
									layer.msg( data.message , { time:1200 , icon:icon },function(){
										window.location.reload();
									});
							},
							error:function(data){
								layer.msg('批量操作失败',{ time:1200 , icon:5 });
								return false;
							}
							})
							
					},function(index){

					});

				break;
				case "batch_order":
				    var list = [];
				    $(document).find( 'input[name=list_order]' ).each(function(){
				        let id = $(this).data('tag');
				        let val = $( this).val();
				        var tmp ={};
				        tmp['id'] = id;
				        tmp['list_order'] = val;
				        list.push( tmp );
				    });
				    if( list.length == 0 ){
				        layer.msg( '请选中要排序的项' );
				        return false;
				    }
				    $.post( '{:cmf_plugin_url("SiteConfig://home_page_config/listorder")}' , {list:list} , function( res ){
				        layer.msg( res.message , { icon: res.code ? 1:5 , time : 800 } , function(){
				            if( res.code == 200 )
				            window.location.reload();
				        } );
				    } );
				break;
			};
			});
			

		//表格工具栏
		table.on('tool(article_tab)', function(obj){
			var data = obj.data;
			let url = "{:cmf_plugin_url('Demo://admin_index/editPage')}?id="+data.id;
			if(obj.event === 'detail'){
				//当事件为查看详情的时候,open一个页面,内容为data.content
				layer.open({
					type: 2
					,title: "查看" //不显示标题栏
					,titleAlign:'c'
					,closeBtn: false
					,shadeClose: false
					,area: ['800px', '600px']
					,shade: 0.8
					,id: 'LAY_article' //设定一个id，防止重复弹出
					,btn: ['确定']
					,btnAlign: 'c'
					,content:url
					,moveType: 1
				});
			} else if(obj.event === 'update'){
				layer.open({
					type: 2
					,title: '编辑'
					,shadeClose: false
					,shade: 0.8
					,area: ['90%', '630px']
					,btn:['保存','关闭']
					,fixed:false
					,content: '{:cmf_plugin_url("SiteConfig://home_page_config/editconfig")}?id='+data.id //iframe的url
					,yes:function(index, layero){
						//调用子页面方法
	
						parentInfo = window["layui-layer-iframe" + index].callbackdata(index);

					},
					btn2:function(index, layero){
					}
				});
			} else if(obj.event === 'delete'){
				//询问框
				layer.confirm('确定要删除吗？', {icon: 3, title:'提示',btn:['删除','取消']}
				, function(index,layero){
					$.ajax({
						url:"{:cmf_plugin_url('SiteConfig://home_page_config/delconfig')}",
						type:'post',
						data:{id:data.id},
						success:function(data){
							let icon = ( data.code == 200 )  ? 1 : 5 ; 
								layer.msg( data.message , { time:1200 , icon:icon },function(){
									window.location.reload();
								});
						},
						error:function(data){
					
							layer.msg('失败',{ time:1200 , icon:5 });
							return false;
						}
						})
						
				},function(index){

				});
				
			}
			
			
		});
		
		
	}();

	</script>
	<script src="__STATIC__/js/js/clipboard.min.js"></script>
	<script type="text/javascript" charset="utf-8">
	    var fuzhi  = function( _this,texta ){
	        if( texta == '' ){
	            layer.msg( '复制失败,内容不存在' );
	            return false;
	        }
            var clipboard = new ClipboardJS( _this, {
                text: function() {
                    
                    layer.alert("复制成功",{icon:1,title:'剪贴板'});
                       
                    return texta;
                }
               
            }); 
            _this.click();  //解决clipboard二次点击生效问题
		    clipboard.destroy();
            window.event? window.event.cancelBubble = true : e.stopPropagation();
            return false;
	    }
	    
	    
	</script>
	<!-- script结束-->

</body>
</html>